<template>
  <div class="my">
    <div class="myMoney">
      <div class="recharge one">
        <div class="money">
          <span>￥</span>
          <strong>{{ account.balance || '0'}}</strong>
        </div>
        <div class="operation">
          <span>账号余额</span>
          <span class="operationClick"><router-link to="Vouche" style="color:#fff">充值</router-link></span>
        </div>
      </div>
      <div
        class="recharge tow"
        disabled="true"
        v-if="
          this.user.power == 1 ||
          this.user.power == 2
        "
      >
        <div class="money">
          <span>￥</span>
          <strong>{{ account.can_withdraw|| '0' }}</strong>
        </div>
        <div class="operation">
          <span>返佣金额</span>
          <span @click="dialogForm" class="operationClick">提现</span>
        </div>
      </div>
      <div
        class="recharge tow rechargeTow"
        disabled="true"
        v-if="this.user.power == 0"
      >
        <div class="money">
          <span>￥</span>
          <strong>0</strong>
        </div>
        <div class="operation">
          <span>返佣金额</span>
          <span class="operationClick" style="cursor: not-allowed;cursor:no-drop;">提现</span>
        </div>
      </div>
      <div
        class="recharge three"
        v-if="
          this.user.power == 1 ||
          this.user.power == 2
        "
      >
        <div class="money">
          <strong>{{ account.myUserCnt||'0' }}</strong>
        </div>
        <div class="operation">
          <span>用户总数</span>
          <span
            v-clipboard:copy="lianjie"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            class="operationClick"
            >邀请</span
          >
        </div>
      </div>
      <div
        class="recharge three rechargeThree"
        v-if="this.user.power == 0"
      >
        <div class="money">
          <strong>0</strong>
        </div>
        <div class="operation">
          <span>用户总数</span>
          <span class="operationClick" style=" cursor: not-allowed;cursor:no-drop;">邀请</span>
        </div>
      </div>
    </div>
    <main>
      <section class="announcement">
        <!-- <article class="content">
          <div class="header">
            <div></div>
            <h2 style="font-weight: bold">活动公告</h2>
          </div>
          <div class="contentText">
            <p>1.老用户邀请新用户注册并使用后，老用户将获得29元邀请奖励</p>
            <p>2.新用户注册后，联系客服即送16元体验金</p>
            <p>用户充值即送4%额外金额</p>
          </div>
        </article> -->
        <article class="content">
          <div class="header">
            <div></div>
            <h2 style="font-weight: bold">充值说明</h2>
          </div>
          <div class="contentText">
            <p>1.为支付安全考虑，实际支付金额会有小范围浮动</p>
            <p>
              2.请务必按照提示金额完成支付实际支付金额即为到账金额，请放心支付
            </p>
            <p>
              3.支付完成后，充值金额会自动到账，您可以在我的页面查看核对，如您充值长时间未到账，请联系客服帮您解决
            </p>
          </div>
        </article>
      </section>
      <section class="announcement system">
        <article class="content system">
          <div class="header">
            <div></div>
            <h2 style="font-weight: bold" v-if="titleflag">系统公告</h2>
            <h2 style="font-weight: bold" v-else >{{announcement.title}}</h2>
          </div>
          <div class="contentText" v-if="contentflag">
            <!-- <p>
              1.平台现只支持抖音业务充值下单板块，需要其他业务板块请联系客服下单
            </p> -->
            <p>1.目前平台暂不支持追加下单，下单前请注意</p>
            <!-- <p>4.高级点赞、分享、播放均正常</p> -->
            <p>2.高级点赞不掉量，不重置。百分百有作品有动态</p>
            <p>
              3.如使用过程中有遇到问题或是对我们的建议，欢迎联系我们，售后支持vx（via20109）
            </p>
            <!-- <p>6.有问题请联系客服微信或者扫描右方二维码：qingyun345789</p> -->
          </div>
          <div class="contentText" v-else v-html="announcement.content">
          </div>
        </article>
      </section>
    </main>
    <el-dialog
      title="提现账号信息绑定"
      :visible.sync="dialogFormVisible"
      v-if="!user.zhifubao"
      :center="true"
    >
      <el-form :model="bindingForm" :rules="rules" ref="bindingForm">
        <el-form-item class="bindingtext">
          <p>绑定说明:</p>
          <p>1、请您确保输入的姓名和支付宝账号的真实性，否则会导致提现失败</p>
          <p>2、系统默认只绑定一个支付宝账号</p>
          <p>希望小主，不要拿自己的返佣开玩笑哦~</p>
        </el-form-item>
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          style="margin-left: -30px"
          prop="userName"
        >
          <el-input v-model="bindingForm.alipay_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="支付宝账号"
          :label-width="formLabelWidth"
          style="margin-left: -30px"
          prop="alipayNum"
        >
          <el-input
            v-model="bindingForm.alipay_account"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="mySubmit">
          <el-button type="primary" @click="dialogFalg('bindingForm')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { _debounce1 } from "../../public/App";
export default {
  props: {},
  data() {
    return {
      account:{},   //账户
      fanyongjine: "",
      dialogFormVisible: false,
      bindingForm: {
        alipay_name: "",
        alipay_account: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入姓名", trigger: "change" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[A-Za-z\u4e00-\u9fa5]+$/,
            message: "不允许输入空格等特殊符号以及数字",
          },
        ],
        alipayNum: [
          { required: true, message: "请输入支付宝账号", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9\u9fa5\@.]+$/,
            message: "不允许输入中文,空格等特殊符号",
          },
        ],
      },
      formLabelWidth: "120px",
      withdrawalForm: {},
      zongtiaoshu:"",
      announcement:{
        title:"",
        content:"",
      },
      titleflag:true,
      contentflag:true,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  created() {
    // const str = 'aa.dwnokb.cn/#/Register'
    // const reg = /(.*)(?=\/\#\/Register)/;
    this.lianjie = '指南针专属注册链接：'+this.user.yuming + '手机电脑均可注册，注册后联系客服帮您激活账号。';
    this.tixianxinqi();
  },
  mounted() {},
  watch: {},
  methods: {
    //我的公告接口
    async acquireAnnouncement() {
      const [err, res] = await this.$http.request({
        url: "wodegonggao/",
        method: "POST",
      });
      if (res.data.shuju.length===0)return;
      if (res.data.shuju[0].biaoti){
        this.titleflag = false
        this.announcement.title = res.data.shuju[0].biaoti;
      }
      if(res.data.shuju[0].neirong){
        this.contentflag = false
        this.announcement.content = res.data.shuju[0].neirong;
      }
    },
    dialogForm: _debounce1(function () {
      {
        this.$confirm('即将提现所有金额,是否继续?','提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(()=>{
          this.dialogFormVisible = true;
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'已取消删除'
          })
        })
      };
      // if (this.user.zhifubao) {
      //   this.$confirm("即将提现所有金额, 是否继续?", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning"
      //   })
      //   .then(async ()=>{
      //     const [err, res] = await this.$http.request({
      //       url: "chuangjiantixian/",
      //       method: "POST",
      //     });
      //     if (err) return;
      //     if (res.data.code == 200) {
      //       this.$message({
      //         showClose: true,
      //         message: "提现成功!",
      //         type: "success",
      //         duration: 1800,
      //       });
      //     }
      //     if(res.data.code == 400){
      //       this.$message({
      //         showClose: true,
      //         message: "提现失败！"+res.data.cuowutishi,
      //         type: "error",
      //         duration: 1800,
      //       });
      //     }
      //   })
      //   .catch(()=>{
      //     this.$message({
      //       type: "info",
      //       message: "已取消提现!"
      //     });
      //   })
      // } else {
      //   this.dialogFormVisible = true;
      // }
    }),
    //提现触发
    dialogFalg(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const [err, res] = await this.$http.request({
            url: "/bindAlipay",
            method: "POST",
            data: this.bindingForm
          });
          if (err) return;
          console.log(res.data.result)
          if(res.data.result===1){
            this.$message({
              showClose: true,
              message: "提现成功!",
              type: "success",
              duration: 1800,
            });
          }
          this.bindingForm.alipay_name='',
          this.bindingForm.alipay_account='',
          this.dialogFormVisible = false;
        }
      });

      // //     console.log(res);
      // //     if (res.data.code == 200) {
      // //       this.$message({
      // //         showClose: true,
      // //         message: "绑定成功!",
      // //         type: "success",
      // //         duration: 1800,
      // //       });
      // //       let user = this.user;
      // //       user.zhifubao = this.bindingForm.zfbNumber;
      // //       this.$store.commit("updateUser", user);
      // //     }
      // //     this.dialogFormVisible = false;
      // //   }
      // // });
    },


      //首页接口
    async tixianxinqi() {
      const [err, res] = await this.$http.request({
        url: "/homeUserInfo",
        method: "GET",
      });
      console.log(res)
      if (err)return;
      this.account=res.data.data
      let userBalance=res.data.data
      console.log(userBalance);
      //保存数据
      this.$store.commit("getBalance",userBalance);
      // if (res.data.zhuangtai == "dengluzhicuowu")return;
      // this.fanyongjine = res.data.zongshouyi;
      // this.Updater();
    //   this.acquireAnnouncement();
    },
    // 复制成功
    onCopy(e) {
      this.$message({
        showClose: true,
        message: "链接复制成功，快去邀请好友注册体验吧！",
        type: "success",
        duration: 1800,
      });
    },
    // 复制失败
    onError(e) {
      this.$message({
        showClose: true,
        message: "复制失败!",
        type: "error",
        duration: 1800,
      });
    },
    // 用户总数
    // async Updater() {
    //   const [err, res] = await this.$http.request({
    //     url: "putongyonghu/",
    //     method: "POST",
    //     data: {
    //       kaishishu: 1,
    //       jieshushu: 10,
    //     },
    //   });
    //   if (err) return;
    //   this.zongtiaoshu = res.data.zongtiaoshu;
    // },
  },
  components: {},
};
</script>

<style scoped lang="stylus">
@import './My.styl'
</style>
